<template>
	<view>
		<!-- //标题 -->
		<view class="top-box tn-cool-bg-color-15--reverse">
			<view class="text-lg text-white margin-left-lg text-bold  padding-xs">{{ timeGet }}</view>
			<view class="text-lg text-bold">{{ louname }}统计</view>
			<view class="text-lg margin-right-sm text-bold  padding-xs" style="border-radius: 10rpx;" @click="shuaxin">刷新</view>
		</view>
		<view v-for="(louorder, index) in louOrder" :key="index" style="font-weight: bold;padding: 10rpx;font-size: 40rpx;">
			{{ louorder.ckey }}层:共计{{ louorder.count }}单
			<view class="login__info__item__button tn-cool-bg-color-15--reverse" hover-class="tn-hover" style="width: 350rpx" :hover-stay-time="150" @click="goCen(louorder.ckey)">
				进入该层订单
			</view>
		</view>
		<u-toast ref="uToast" />
		<view style="margin-top: 30rpx;margin-bottom: 20rpx;" class="login__mode tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-center">
			<view class="login__mode__item tn-flex-1" :class="[{ 'login__mode__item--active': currentModeIndex === 0 }]" @tap.stop="modeSwitch(0)">未送</view>
			<view class="login__mode__item tn-flex-1" :class="[{ 'login__mode__item--active': currentModeIndex === 1 }]" @tap.stop="modeSwitch(1)">已送</view>
			<!-- 滑块-->
			<view class="login__mode__slider tn-cool-bg-color-15--reverse" :style="[modeSliderStyle]"></view>
		</view>

		<block v-if="currentModeIndex == 0">
			<view class="scroll-items">
				<scroll-view style="height: 100%;width: 100%;" scroll-with-animation :scroll-y="true" refresher-background="#eee" :refresher-threshold="100">
					<view class="nullOrder" v-if="orderList.orderList.length == 0">
						<image src="../../../../static/img/order_icon.png" mode=""></image>
						<text class="tit">暂无订单</text>
					</view>
					<block v-for="(order, j) in orderList.orderList" :key="j" v-else>
						<view class="order-item" v-if="order">
							<view class="item-top">
								<view class="tit">
									<text>{{ order.storeName }}</text>
									<!-- <i class="hxicon-right"></i> -->
								</view>
								<view class="right" v-if="order.ostatus == 1" style="font-size: 24rpx;font-weight: bold;color: #E54D42;"><text>已取消</text></view>
								<view class="right" v-else-if="order.ostatus == 5" style="font-size: 24rpx;font-weight: bold;color: #E54D42;"><text>已完成</text></view>
							</view>
							<view class="item-center">
								<view class="right">
									<view class="row" style="font-size: 40rpx;font-weight: bold;color: #E54D42;">
										<text class="" style="font-size: 36rpx;">订单号：{{ order.id }}</text>
									</view>
									<view class="row">
										<text>姓名：{{ order.name }}</text>
									</view>
									<view class="row">
										<text>下单时间：{{ order.creatTime }}</text>
									</view>
									<view class="row">
										<text>总价：￥{{ order.money }}</text>
									</view>
									<view class="row">
										<text>送达时间：{{getOrderTime(order)  }}</text>
									</view>
									<view class="row" style="font-size: 40rpx;font-weight: bold;color: #E54D42;">
										<text>
											地址：{{ order.addressname }}
											<text style="font-size: 50rpx;color: black;">{{ order.area }}</text>
										</text>
									</view>
									<view v-if="order.remark" class="row" style="font-size: 40rpx;font-weight: bold;color: #F3A73F;">
										备注：
										<text class="text-black bg-gradual-blue">{{ order.remark }}</text>
									</view>
									<view class="row">
										<text class="text-bold text-lg">电话号码：{{ order.mobile }}</text>
									</view>
								</view>
							</view>

							<!-- 2代表已下单但没支付，显示为待支付    状态2->3的改变是用户付完款的回调
								3代表用户已经支付，显示为商家正在制作中  状态3->4的改变是骑手点击我已取餐按钮发生的点击事件
								4代表骑手已经取到餐，显示为骑手正在配送中 状态4->9发生的改变是骑手送到楼下后点击我已送达楼下按钮发生的点击事件
								9代表骑手已经送到楼下，显示为餐已送达宿舍楼下，楼栋长正在配送上楼  状态9->5发生的改变楼栋长已经送到客户手里后点击我已送达寝室按钮发生的点击事件
								5代表楼栋长已经将餐送到客户手里，显示为餐已送达
							 -->

							<!-- //楼栋长对订单三个操作按钮【拨号】【无法送上楼】【已送达】 -->
							<view class="item-bottom">
								<view class="login__info__item__button tn-cool-bg-color-15--reverse" hover-class="tn-hover" :hover-stay-time="150" @click="gomobile(order.mobile)">
									拨号
								</view>
								<view
									class="login__info__item__button tn-cool-bg-color-15--reverse"
									v-if="order.ostatus == 4 || order.ostatus == 3"
									@click="notGet(order.id, order.mobile, j)"
								>
									无法上楼
								</view>
								<view
									class="login__info__item__button tn-cool-bg-color-15--reverse"
									hover-class="tn-hover"
									:hover-stay-time="150"
									@click="gotoDetail(order.orderid, j)"
								>
									订单内容
								</view>
								<view
									class="login__info__item__button tn-cool-bg-color-15--reverse"
									hover-class="tn-hover"
									:hover-stay-time="150"
									v-if="order.ostatus == 4"
									@click="goRefund(order.id, j)"
								>
									已送达
								</view>
								<view
									class="login__info__item__button tn-cool-bg-color-15--reverse"
									hover-class="tn-hover"
									:hover-stay-time="150"
									v-if="order.ostatus == 3"
									@click="checkOrder(order.id, j)"
								>
									已到楼下
								</view>
							</view>
						</view>
					</block>
				</scroll-view>
			</view>
		</block>

		<block v-else>
			<view class="scroll-items">
				<scroll-view style="height: 100%;width: 100%;" scroll-with-animation :scroll-y="true" refresher-background="#eee" :refresher-threshold="100">
					<view class="nullOrder" v-if="orderList.ysorderList.length == 0">
						<image src="../../../../static/img/order_icon.png" mode=""></image>
						<text class="tit">暂无订单</text>
					</view>
					<block v-for="(order, j) in orderList.ysorderList" :key="j" v-else>
						<view class="order-item" v-if="order">
							<view class="item-top">
								<view class="tit" style="font-size: 40rpx;">
									<text>{{ order.storeName }}</text>
									<i class="hxicon-right"></i>
								</view>
								<view class="right" v-if="order.ostatus == 1" style="font-size: 32rpx;font-weight: bold;color: #E54D42;"><text>已取消</text></view>
								<view class="right" v-else-if="order.ostatus == 5" style="font-size: 32rpx;font-weight: bold;color: #E54D42;"><text>已完成</text></view>
							</view>
							<view class="item-center">
								<view class="right">
									<view class="row" style="font-size: 40rpx;font-weight: bold;color: #E54D42;">
										<text>订单号：{{ order.id }}</text>
									</view>
									<view class="row">
										<text>姓名：{{ order.name }}</text>
									</view>
									<view class="row">
										<text>下单时间：{{ order.creatTime }}</text>
									</view>
									<view class="row">
										<text>总价：￥{{ order.money }}</text>
									</view>
									<view class="row">
										<text>送达时间：{{ getOrderTime(order) }}</text>
									</view>
									<view class="row" style="font-size: 40rpx;font-weight: bold;">
										<text>
											地址：{{ order.addressname }}
											<text style="font-size: 50rpx;color: black;">{{ order.area }}</text>
										</text>
									</view>
									<view v-if="order.remark" class="row" style="font-size: 40rpx;font-weight: bold;color: #F3A73F;">
										备注：
										<text class="text-black bg-gradual-blue">{{ order.remark }}</text>
									</view>
									<view class="row">
										<text>电话号码：{{ order.mobile }}</text>
									</view>
								</view>
							</view>

							<!-- 2代表已下单但没支付，显示为待支付    状态2->3的改变是用户付完款的回调
								3代表用户已经支付，显示为商家正在制作中  状态3->4的改变是骑手点击我已取餐按钮发生的点击事件
								4代表骑手已经取到餐，显示为骑手正在配送中 状态4->9发生的改变是骑手送到楼下后点击我已送达楼下按钮发生的点击事件
								9代表骑手已经送到楼下，显示为餐已送达宿舍楼下，楼栋长正在配送上楼  状态9->5发生的改变楼栋长已经送到客户手里后点击我已送达寝室按钮发生的点击事件
								5代表楼栋长已经将餐送到客户手里，显示为餐已送达
							 -->
							<view class="item-bottom">
								<view class="login__info__item__button tn-cool-bg-color-15--reverse" hover-class="tn-hover" :hover-stay-time="150" @click="gomobile(order.mobile)">
									拨号
								</view>
								<view
									class="login__info__item__button tn-cool-bg-color-15--reverse"
									hover-class="tn-hover"
									:hover-stay-time="150"
									@click="gotoDetail(order.orderid, j)"
								>
									订单内容
								</view>
								<view class="login__info__item__button tn-cool-bg-color-15--reverse" hover-class="tn-hover" :hover-stay-time="150" @click="goNotGet(order.id, j)">
									未送达
								</view>
							</view>
						</view>
					</block>
				</scroll-view>
			</view>
		</block>
	</view>
</template>

<script>
//时间
//数据库引入
const db = uniCloud.database();
const dbCmd = db.command;
//引入全局变量
var app = getApp();
export default {
	data() {
		return {
			supermanger: false,
			qsstatus: 0,
			timeGet: '',
			weisongorderList: [],
			orderList: [],
			//购物车缓存 Storage 名称
			shoppingCartStorageName: 'shopping_cart',
			//门店信息
			louOrder: [],
			// 当前选中的模式
			currentModeIndex: 0,
			// 模式选中滑块
			modeSliderStyle: {
				left: 0
			},
			lou: 1,
			louname: '',
			openid:""
		};
	},
	watch: {
		currentModeIndex(value) {
			const sliderWidth = uni.upx2px(476 / 2);
			this.modeSliderStyle.left = `${sliderWidth * value}px`;
		}
	},
	onLoad(options) {
		let that = this;
		console.log(options.timeGive);
		that.supermanger = options.super;
		if (that.supermanger == undefined) {
			that.supermanger = false;
		}
		that.timeGet = options.timeGive;
		this.louname = options.louname;
		this.cen = options.cen;
		this.openid = options.openid;
		//TODO:楼栋长需要修改的地方
		
		that.init();
	},
	onShow() {},
	methods: {
		getOrderTime(order){
			if(order.oSchool==1){
				//是本部校区
				switch(order.givetime){
					case "11:20~11:40":{
						return "11:25~11:45"
					}
					case "11:40~12:00":{
						return "11:45~12:05"
					}
					case "12:20~12:40":{
						return "12:25~12:45"
					}
					case "17:20~17:40":{
						return "17:25~17:45"
					}
					case "17:40~18:00":{
						return "17:45~18:05"
					}
					case "18:20~18:40":{
						return "18:25~18:45"
					}
					
				}
			}else{
				return order.givetime
			}
		},
		gotoDetail(orderId, id) {
			uni.navigateTo({
				url: '/pages/order/orderDetail/orderDetail?orderId=' + orderId
			});
		},
		notGet(id, mobile, index) {
			let that = this;
			let data1 = {
				orderId: id
			};
			uni.showModal({
				title: '是否需要启用平台机器人电话通知用户下楼取外卖?',
				success(res) {
					if (res.confirm) {
						uni.showLoading({
							title: '请稍等...'
						});
						uni.request({
							url: 'https://zback.shixiaozhu.work/ShixiaozhuTest/order/wechatRefundForGo',
							method: 'POST',
							header: {
								'content-type': 'application/x-www-form-urlencoded;charset:utf-8'
							},
							data: data1,
							success(res) {
								if (res.data.status == 200) {
									uni.request({
										url: 'https://zback.shixiaozhu.work/ShixiaozhuTest/voiceNotice/noticeForGet1?mobile=' + mobile,
										success(res) {
											var order = that.orderList.orderList[index];
											that.orderList.orderList.splice(index, 1);
											order.ostatus = 5;
											that.orderList.ysorderList.push(order);
											that.$refs.uToast.show({
												title: '成功操作！',
												type: 'success'
											});
											uni.hideLoading();
										}
									});
								} else {
									uni.hideLoading();
									that.$refs.uToast.show({
										title: '操作失败！',
										type: 'error'
									});
								}
							}
						});
					} else {
						return;
					}
				}
			});
		},
		// 切换模式
		modeSwitch(index) {
			this.currentModeIndex = index;
		},
		commitOrder(orderId) {
			let that = this;
			//开始构造订单内容
			let content = '';
			//拿到打印机编号
			uni.request({
				url: 'https://zback.shixiaozhu.work/ShixiaozhuTest/Feie/ReprintFeie?orderId=' + orderId,
				success(res) {
					that.$refs.uToast.show({
						title: '成功操作！',
						type: 'success'
					});
				}
			});
		},
		gomobile(phone) {
			uni.makePhoneCall({
				phoneNumber: phone //仅为示例
			});
		},
		//开始加载
		init() {
			let that = this;
			uni.request({
				url:
					'https://zback.shixiaozhu.work/ShixiaozhuTest/order/getOrderDetailCountForLouNameForCen?addressName=' +
					that.louname +
					'&givetime=' +
					that.timeGet +
					'&censhu=' +
					that.cen,
				success(res) {
					that.orderList = res.data.data;
					that.orderList.orderList = that.sortByPaixu(that.orderList.orderList, 'area');
					console.log('该层订单共', that.orderList.orderList.length);
					that.orderList.ysorderList = that.sortByPaixu(that.orderList.ysorderList, 'area');
					console.log('该层已送订单共', that.orderList.ysorderList.length);
				}
			});
		},
		//数组里的对象根据某个字段排序
		sortByPaixu(array, key) {
			return array.sort(function(a, b) {
				var x = a[key];
				var y = b[key];
				return x < y ? -1 : x > y ? 1 : 0;
			});
		},
		//订单状态改变 ：3->4
		goFinish(number, id) {
			let that = this;
			db.collection('order')
				.doc(id)
				.update({
					data: {
						status: 4
					}
				})
				.then(res => {
					console.log('订单数据', res);
					// that.orderList.splice(number, 1);
					that.orderList[j].data.status = 4;
					that.$refs.uToast.show({
						title: '成功操作！',
						type: 'success'
					});
				});
		},
		checkOrder(id, index) {
			let that = this;
			uni.showLoading({
				title: '正在处理中...',
				mask: true
			});
			uni.request({
				url: 'https://zback.shixiaozhu.work/ShixiaozhuTest/order/checkOrder?id=' + id,
				success(res) {
					if (res.data.status == 200) {
						uni.hideLoading();
						var order = that.orderList.orderList[index];
						// that.orderList.orderList.splice(index,1)
						order.ostatus = 4;
						// that.orderList.ysorderList.push(order)
						that.$refs.uToast.show({
							title: '成功操作！',
							type: 'success'
						});
					}
				}
			});
		},
		//订单状态改变  ：9->5
		goRefund(id, index) {
			let that = this;
			uni.showLoading({
				title: '正在处理中...'
			});
			uni.request({
				url: 'https://zback.shixiaozhu.work/ShixiaozhuTest/order/successTake?id=' + id+"&openid="+that.openid,
				success(res) {
					if (res.data.status == 200) {
						uni.hideLoading();
						// that.orderList.orderList.splice(index,1)
						order.ostatus = 5;
						// that.orderList.ysorderList.push(order)
						that.$refs.uToast.show({
							title: '成功操作！',
							type: 'success'
						});
					}
				}
			});
		},
		goNotGet(id, index) {
			let that = this;
			uni.showLoading({
				title: '正在处理中...'
			});
			uni.request({
				url: 'https://zback.shixiaozhu.work/ShixiaozhuTest/order/cancelTake?id=' + id,
				success(res) {
					if (res.data.status == 200) {
						uni.hideLoading();
						var order = that.orderList.ysorderList[index];
						that.orderList.ysorderList.splice(index, 1);
						order.ostatus = 3;
						that.orderList.orderList.push(order);
						that.$refs.uToast.show({
							title: '成功操作！',
							type: 'success'
						});
					}
				}
			});
		},
		shuaxin() {
			(this.storeData = {}), (this.storeOrder = []), (this.louOrder = []);
			this.init();
		}
	}
};
</script>

<style lang="scss" scoped>
.login__info__item__button {
	width: 160rpx;
	padding: 10rpx;
	border-radius: 8rpx;
	text-align: center;
	font-size: 24rpx;
	font-weight: bold;
	justify-content: center;
	align-items: center;
}
.login {
	position: relative;
	height: 100%;
	z-index: 1;
	/* 内容 start */
	&__wrapper {
		padding-top: 120rpx;
		width: 100%;
	}
	/* 切换 start */
	&__mode {
		position: relative;
		margin: 0 auto;
		width: 476rpx;
		height: 77rpx;
		background-color: rgba(255, 255, 255, 0.2);
		backdrop-filter: blur(6rpx);
		-webkit-backdrop-filter: blur(6rpx);
		box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
		border-radius: 39rpx;
		&__item {
			height: 77rpx;
			width: 100%;
			line-height: 77rpx;
			text-align: center;
			font-size: 31rpx;
			color: #000000;
			font-weight: bold;
			letter-spacing: 1em;
			text-indent: 1em;
			z-index: 2;
			transition: all 0.4s;

			&--active {
				font-weight: bold;
				color: #ffffff;
			}
		}
		&__slider {
			position: absolute;
			height: inherit;
			width: calc(476rpx / 2);
			border-radius: inherit;
			box-shadow: 0rpx 18rpx 72rpx 18rpx rgba(0, 195, 255, 0.1);
			z-index: 1;
			transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
		}
	}
}
.nullOrder {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 80rpx auto;
	image {
		width: 566rpx;
		height: 400rpx;
	}
	.tit {
		display: flex;
		flex-direction: column;
		font-size: 32rpx;
		font-weight: bold;
		color: #555;
		margin-top: 12rpx;
	}
}
.top-box {
	width: 100%;
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.head {
	background: linear-gradient(100deg, #ffeb3b, #ffc107);
	padding-bottom: 20rpx;
	padding-top: 20rpx;
	.status {
		height: var(--status-bar-height);
	}
	.search {
		height: 80rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin: 0 30rpx;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		font-size: 28rpx;
		color: #888;
		i {
			font-weight: bold;
			font-size: 32rpx;
		}
		.tit {
			margin-left: 12rpx;
		}
	}
}
.tabs-box {
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	// position: sticky;
	// top: calc(88rpx + var(--status-bar-height));
	z-index: 10;
	background-color: white;
	height: 100rpx;
	padding-bottom: 20rpx;

	.hx-tabs {
		position: relative;
		display: flex;
		height: 100%;
		width: 100%;
		justify-content: space-evenly;

		&-item {
			display: flex;
			flex: 1;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			width: 140rpx;
			color: #666666;

			text {
				font-size: 32rpx;
			}
		}
		&-active {
			color: #333333;
			font-weight: bold;
		}
		&-slider-box {
			position: absolute;
			display: flex;
			justify-content: center;
			bottom: 0;
			width: 20%;
		}
		&-slider {
			display: flex;
			background: #f6d200;
			width: 60rpx;
			height: 6rpx;
		}
	}
}
.main {
	position: relative;
	height: 100vh;
	background-color: #ffffff;

	#mainSwiper {
		background-color: #eeeeee;
		height: 100%;
		width: 100%;

		.bannerimg-box {
			border-bottom-left-radius: 10upx;
			border-bottom-right-radius: 10upx;
			padding: 30rpx 24rpx 14rpx;

			swiper {
				height: 233rpx;
				width: 699rpx;
			}

			.swiper-item {
				display: flex;
				justify-content: center;
				align-content: center;
				overflow: hidden;

				width: 100%;
				height: 100%;

				image {
					border-radius: 16rpx;
					width: 100%;
				}
			}
		}
		.nullOrder {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin: 80rpx auto;
			image {
				width: 566rpx;
				height: 400rpx;
			}
			.tit {
				display: flex;
				flex-direction: column;
				font-size: 32rpx;
				font-weight: bold;
				color: #555;
				margin-top: 12rpx;
			}
		}
	}
}

.scroll-items {
	height: 100%;
}

.order-item {
	display: flex;
	flex-direction: column;
	background-color: #fff;
	margin: 8rpx 15rpx 20rpx 15rpx;
	border-radius: 20rpx;
	padding: 0 15rpx 15rpx 15rpx;
	box-shadow: 0rpx 0rpx 15rpx rgba(0, 0, 0, 0.05);
}
.item-top {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 12rpx 0;
	border-bottom: 2rpx solid #f5f5f5;
	.tit {
		flex: 1;
		margin-left: 12rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		padding-right: 80rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		flex-direction: row;
	}
	.right {
		font-size: 28rpx;
		color: #666;
	}
}

.item-center {
	display: flex;
	flex-direction: row;
	margin-top: 6rpx;
	color: #666;
	font-size: 28rpx;

	image {
		border-radius: 12rpx;
		height: 120rpx;
		width: 120rpx;
	}

	.right {
		flex: 1;
		margin-left: 20rpx;
	}

	.row {
		font-weight: bold;
		font-size: 24rpx;
	}
}

.item-bottom {
	padding-right: 150rpx;
	margin-top: 24rpx;
	width: 100%;
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.btn {
	padding: 14rpx 28rpx;
	border: 2rpx solid #cdcdcd;
	font-size: 28rpx;
	color: #555;
	border-radius: 20rpx;
	transition: all 0.2s;
	background: #fff;
}

.btn:active {
	color: #888;
	background: #f1f1f1;
}

.bg-yellow {
	background: linear-gradient(100deg, #ffeb3b, #ffc107);
	border-color: #ffe635;
	font-weight: bold;
}

.bg-yellow:active {
	background: linear-gradient(100deg, #e8d536, #dda809);
}

.nullOrder {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 80rpx auto;

	image {
		width: 566rpx;
		height: 400rpx;
	}

	.tit {
		display: flex;
		flex-direction: column;
		font-size: 32rpx;
		font-weight: bold;
		color: #555;
		margin-top: 12rpx;
	}
}

.list-item {
	margin-top: 20rpx;
	margin-left: 20rpx;
	margin-right: 20rpx;
	display: flex;
	justify-content: space-between;
	border-bottom: 1rpx solid #e2e2e2;
	width: 100%;

	.title {
		font-size: 35rpx;
		font-weight: bold;
	}
}

.list-item-yingye {
	margin-top: 20rpx;
	margin-left: 20rpx;
	margin-right: 20rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	border-bottom: 1rpx solid #e2e2e2;
}

.cartList_box {
	margin: 20rpx;
	border: 4rpx solid #dcdcdc;
}

.pop_box {
	width: 500rpx;
	height: auto;
}

.pop_btn_box {
	display: flex;
	justify-content: space-around;
}

.text-input {
	width: 100%;
	min-height: 250rpx;
	max-height: 600rpx;
	font-weight: 500;
	background-color: #999999;
}

.b-r {
	border-radius: 12rpx;
}

.m-t {
}

.p-bb {
	height: 2rpx;
	//background:  #E4E7ED;
}

.flex-rl {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.container {
	margin-left: 24rpx;
	margin-right: 24rpx;
	background-color: #ffffff;
}

.p12 {
	padding: 24rpx;
}

.t-top-box {
	display: flex;
}

.head {
	background: linear-gradient(to bottom, #ffc107, #f1f1f1);

	padding-top: 40rpx;

	.tab-box {
		position: relative;
		height: 80rpx;
		margin: 0 24rpx;

		.item {
			position: absolute;
			top: 0;
			bottom: 0;
			height: 80rpx;
			text-align: center;
			font-size: 28rpx;

			width: 50%;

			.tit-box {
				position: relative;
				height: 72rpx;
				line-height: 72rpx;
				border-top-left-radius: 12rpx;
				border-top-right-radius: 12rpx;
				background-color: rgba(#ffffff, 0.6);
				width: 100%;
			}
		}

		.item:first-child {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: flex-end;
			left: 0;
		}

		.item:last-child {
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			align-items: flex-end;
			right: 0;
		}

		.active {
			height: 80rpx;
			width: 51%;
			font-weight: bold;

			.tit-box {
				height: 80rpx;
				line-height: 80rpx;
				background-color: rgba(#ffffff, 1);
			}
		}

		.left .tit-box {
			margin-left: 24rpx;
			margin-right: -24rpx;
			padding-right: 24rpx;
		}

		.right .tit-box {
			margin-right: 24rpx;
			margin-left: -24rpx;
			padding-left: 24rpx;
		}

		.left.active .tit-box {
			margin: 0;
		}

		.right.active .tit-box {
			margin: 0;
		}

		.left.active .tit-box:after {
			content: '';
			position: absolute;
			right: -24rpx;
			bottom: 0;
			border-top: 24rpx solid transparent;
			border-right: 24rpx solid transparent;
			border-bottom: 72rpx solid #ffffff;
		}

		.right.active .tit-box:after {
			content: '';
			position: absolute;
			left: -24rpx;
			bottom: 0;
			border-top: 24rpx solid transparent;
			border-left: 24rpx solid transparent;
			border-bottom: 72rpx solid #ffffff;
		}
	}

	.wrapper {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.address-box {
		display: flex;
		align-items: center;

		.tag {
			font-size: 24upx;
			color: $base-color;
			margin-right: 10upx;
			background: #fffafb;
			border: 2rpx solid #ffc107;
			border-radius: 4upx;
			padding: 4upx 10upx;
			line-height: 1;
		}

		.address {
			font-size: 30upx;
			color: $font-color-dark;
		}
	}

	.u-box {
		font-size: 28upx;
		color: $font-color-light;
		margin-top: 16upx;

		.name {
			margin-right: 30upx;
		}
	}

	.head-bottom {
		overflow: hidden;
		background: #ffffff;
		border-top-left-radius: 12rpx;
		border-top-right-radius: 12rpx;
		border-bottom-left-radius: 12rpx;
		border-bottom-right-radius: 12rpx;

		.tab {
			.t-top {
				&-box {
					margin: 0;
					padding: 24rpx;

					.txt1 {
						font-size: 36rpx;
						color: #888;
					}

					.icon1 {
						margin-left: 16rpx;
						color: #bbb;
					}
				}

				&-box:active {
					background-color: #f5f5f5;
				}
			}

			.t-bb {
				margin: 0 24rpx;
				height: 1rpx;
				background-color: #e4e7ed;
			}

			.t-bottom {
				padding: 24rpx;

				.row1 {
					display: flex;
					flex-direction: row;
					justify-content: space-between;

					//padding: 24rpx 0 0;
					.left {
						font-size: 28rpx;
						font-weight: bold;
					}

					.right {
						font-size: 28rpx;
						color: #ff9800;

						i {
							margin-left: 16rpx;
							color: #bbb;
						}
					}
				}

				.row2 {
					margin-top: 12rpx;
					font-size: 24rpx;
					color: #ff9800;
				}
			}
		}
	}

	.head-bottom.selectOne {
		border-top-left-radius: 0;
		border-top-right-radius: px;
	}

	.head-bottom.selectTow {
		border-top-left-radius: 12rpx;
		border-top-right-radius: 0;
	}
}

.row1 {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;

	.tit {
		font-size: 28rpx;
		color: #333333;
		font-weight: bold;
		flex: 1;
		flex-wrap: wrap;

		.zk {
			padding: 2rpx 6rpx;
			font-size: 20rpx;
			margin-right: 16rpx;
			border-radius: 8rpx;
			background-color: #f9221d;
			color: #ffffff;
		}
	}

	.old-price {
		padding-left: 24rpx;
		font-size: 28rpx;
		color: #888888;
		font-weight: bold;

		.lt {
			text-decoration: line-through;
		}

		.fh {
			font-size: 20rpx;
		}
	}

	.price {
		font-size: 32rpx;
		padding-left: 24rpx;
		color: #333333;
		font-weight: bold;

		.fh {
			font-size: 20rpx;
		}
	}
}

.goods-item {
	margin-top: 40rpx;
	display: flex;
	flex-direction: row;

	.left {
		width: 120rpx;
		height: 120rpx;

		image {
			border-radius: 8rpx;
			overflow: hidden;
			width: 100%;
			height: 100%;
			background-color: #f1f1f1;
		}
	}

	.right {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex: 1;
		padding-left: 28rpx;

		.row2 {
		}

		.row3 {
			font-size: 20rpx;
			color: #888888;
		}
	}
}

.goods-item:first-child {
	margin: 0;
}

.store {
	display: flex;
	flex-direction: column;

	.name {
		padding: 8rpx 0 0rpx;
		font-size: 28rpx;
	}

	.goods-box {
	}

	.peisong {
		.right {
			font-size: 28rpx;
			font-weight: bold;
		}

		.left {
			font-size: 32rpx;
			font-weight: bold;

			.fh {
				font-size: 20rpx;
			}
		}
	}

	.zhekou-box {
		.zhekou {
			display: flex;
			flex-direction: row;
			margin-top: 24rpx;

			.row1 {
				align-items: center;

				.left {
					display: flex;
					flex-direction: row;
					align-items: center;
					height: 40rpx;
					line-height: 40rpx;

					i {
						font-size: 32rpx;
						color: #ff5722;
					}

					.tit {
						font-weight: bold;
						margin-left: 12rpx;
						font-size: 28rpx;
						color: #333;
					}
				}

				.right {
					.tag1 {
						font-weight: bold;
						font-size: 28rpx;
						color: #ff5722;
					}
				}
			}

			.row2 {
				height: 40rpx;
				line-height: 40rpx;
				font-size: 24rpx;
				color: #888;
			}
		}

		.zhekou:first-child {
			margin: 0;
		}
	}

	.totalbox {
		align-items: flex-end;

		.left {
			display: flex;
			flex-direction: row;
			align-items: center;
			font-size: 28rpx;
			color: #888;

			[class*='hxicon-'] {
				color: #aaa;
				margin-left: 8rpx;
				font-size: 32rpx;
			}
		}

		.right {
			display: flex;
			flex-direction: row;
			align-items: flex-end;

			.yh {
				color: #ff5722;

				.txt {
					color: #000;
					font-size: 30rpx;
				}

				.fh {
					font-weight: bold;
					margin-left: 6rpx;
					font-size: 26rpx;
				}

				.num {
					font-weight: bold;
					font-size: 36rpx;
				}
			}

			.total {
				margin-left: 32rpx;
				color: #333;

				.txt {
					font-size: 30rpx;
				}

				.fh {
					margin-left: 6rpx;
					font-size: 24rpx;
					font-weight: bold;
				}

				.num {
					font-weight: 900;
					font-size: 44rpx;
				}
			}
		}
	}
}

.privacy {
	display: flex;
	flex-direction: column;

	.row1 {
		align-items: flex-end;

		.left {
			display: flex;
			flex-direction: row;
			align-items: center;

			.icon1 {
				color: #444;
				font-size: 48rpx;
			}

			.icon2 {
				color: #aaa;
				margin-left: 12rpx;
				font-size: 32rpx;
			}

			.txt {
				color: #333;
				margin-left: 12rpx;
				font-weight: bold;
				font-size: 28rpx;
			}
		}

		.right {
		}
	}

	.row2 {
		margin-top: 8rpx;
		color: #888;
		font-size: 24rpx;
	}

	.row3 {
		margin-top: 16rpx;
		font-size: 24rpx;
		color: #ff9800;
	}
}

.other-box {
	display: flex;
	flex-direction: column;

	.row {
		align-items: center;

		.left {
			font-size: 28rpx;
			color: #333;
			font-weight: bold;
			flex: 1;
		}

		.right {
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: center;
			flex-wrap: wrap;
			width: 60%;
			font-size: 28rpx;
			display: flex;
			flex-direction: row;
			color: #aaa;

			[class*='hxicon-'] {
				position: relative;
				top: 4rpx;
				font-size: 28rpx;
			}
		}
	}
}

.body-end {
	height: 200rpx;
}

.foot {
	z-index: 11;
	position: fixed;
	display: flex;
	flex-direction: row;
	border-radius: 100rpx;
	overflow: hidden;
	bottom: 24rpx;
	left: 24rpx;
	right: 24rpx;
	height: 100rpx;

	.left {
		padding: 0 24rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-color: #222222;
		flex: 1;

		.price {
			display: flex;
			flex-direction: row;
			align-items: baseline;
			color: #fff;
			height: 50rpx;
			line-height: 50rpx;

			.fh {
				font-weight: bold;
				font-size: 24rpx;
			}

			.txt {
				font-size: 44rpx;
				font-weight: bold;
			}
		}

		.discount {
			margin-left: 4rpx;
			font-size: 20rpx;
			color: #bbb;
		}
	}

	.center {
		display: flex;
		align-items: center;
		background-color: #444;
		color: #ffc107;
		font-weight: bold;
		font-size: 32rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		transition: all 0.3s;
	}

	.center:active {
		background-color: #666;
	}

	.right {
		display: flex;
		align-items: center;
		color: #222;
		font-weight: bold;
		font-size: 32rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		transition: all 0.3s;
		background: linear-gradient(45deg, #ffeb3b, #ffc107);
	}

	.right:active {
		background: linear-gradient(45deg, #e0ce31, #e4ad06);
	}
}

.head {
	background: linear-gradient(100deg, #ffeb3b, #ffc107);
	padding-bottom: 20rpx;
	padding-top: 20rpx;

	.status {
		height: var(--status-bar-height);
	}
}

.search {
	height: 80rpx;
	background-color: #fff;
	border-radius: 20rpx;
	margin: 0 30rpx;
	display: flex;
	align-items: center;
	padding: 0 30rpx;
	font-size: 28rpx;
	color: #888;
}

.tabs-box {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	position: sticky;
	z-index: 10;
	background-color: white;
	height: 100rpx;
	padding-bottom: 20rpx;

	.hx-tabs {
		position: relative;
		display: flex;
		height: 100%;
		width: 100%;
		justify-content: space-evenly;

		&-item {
			display: flex;
			flex: 1;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			width: 140rpx;
			color: #666666;

			text {
				font-size: 32rpx;
			}
		}

		&-active {
			color: #333333;
			font-weight: bold;
		}

		&-slider-box {
			position: absolute;
			display: flex;
			justify-content: center;
			bottom: 0;
			width: 20%;
		}

		&-slider {
			display: flex;
			background: #f6d200;
			width: 60rpx;
			height: 6rpx;
		}
	}
}

.main {
	position: relative;
	background-color: #ffffff;

	#mainSwiper {
		background-color: #eeeeee;
		height: 100%;
		width: 100%;

		.bannerimg-box {
			border-bottom-left-radius: 10upx;
			border-bottom-right-radius: 10upx;
			padding: 30rpx 24rpx 14rpx;

			swiper {
				height: 233rpx;
				width: 699rpx;
			}

			.swiper-item {
				display: flex;
				justify-content: center;
				align-content: center;
				overflow: hidden;

				width: 100%;
				height: 100%;

				image {
					border-radius: 16rpx;
					width: 100%;
				}
			}
		}

		.nullOrder {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin: 80rpx auto;

			image {
				width: 566rpx;
				height: 400rpx;
			}

			.tit {
				display: flex;
				flex-direction: column;
				font-size: 32rpx;
				font-weight: bold;
				color: #555;
				margin-top: 12rpx;
			}
		}

		.scroll-items {
			height: 100%;

			.order-item {
				display: flex;
				flex-direction: column;
				background-color: #fff;
				margin: 16rpx 30rpx;
				border-radius: 20rpx;
				padding: 0 30rpx;

				.item-top {
					display: flex;
					flex-direction: row;
					align-items: center;
					padding: 24rpx 0;
					border-bottom: 2rpx solid #f5f5f5;

					image {
						border-radius: 50%;
						width: 48rpx;
						height: 48rpx;
					}

					.tit {
						flex: 1;
						margin-left: 12rpx;
						font-size: 32rpx;
						font-weight: bold;
						color: #333;
						padding-right: 80rpx;
						display: flex;
						align-items: center;
						flex-wrap: wrap;
						flex-direction: row;
					}

					.right {
						font-size: 28rpx;
						color: #666;
					}
				}

				.item-center {
					display: flex;
					flex-direction: row;
					margin-top: 24rpx;
					color: #666;
					font-size: 28rpx;

					image {
						border-radius: 12rpx;
						height: 120rpx;
						width: 120rpx;
					}

					.right {
						flex: 1;
						margin-left: 20rpx;
					}
				}

				.item-bottom {
					display: flex;
					flex-direction: row;
					margin-top: 24rpx;
					margin-bottom: 30rpx;

					.left {
						flex: 1;
					}

					.btn {
						padding: 14rpx 28rpx;
						border: 2rpx solid #cdcdcd;
						font-size: 28rpx;
						color: #555;
						border-radius: 20rpx;
						transition: all 0.2s;
						background: #fff;
					}

					.btn:active {
						color: #888;
						background: #f1f1f1;
					}

					.bg-yellow {
						background: linear-gradient(100deg, #ffeb3b, #ffc107);
						border-color: #ffe635;
						font-weight: bold;
					}
					.bg-yellow:active {
						background: linear-gradient(100deg, #e8d536, #dda809);
					}
				}
			}
		}
	}
}
</style>
